<template>
<!--  此组件代表tabbar里面的项，路径和名字不能写死，所以使用具名插槽在创建的时候传入图片路径和名字-->
    <div class="tab-bar-item" @click="itemClick">
<!--一次需要导入两张图片，动态决定哪一张显示,再创建一个插槽，并使用v-if判断哪个应该显示，文字是否变红-->
      <div v-if="!isActive">
        <slot name="item-icon"></slot>
      </div>
      <div v-else>
        <slot name="item-icon-active"></slot>
      </div>
<!--      v:blind 属性名:属性值
      我们不能再<slot>上直接加：class因为插过来的标签会把属性替换掉，所以我们在外层包裹div，见笔记四-7提醒  绑定一个计算属性中的style-->
      <div :style="activeStyle">
        <slot name="item-text"></slot>
      </div>
    </div>
</template>
<script>
export default {
  name: "TabBarItem",
  //获取从app。vue传入的地址值，以及活跃时候的颜色，设置默认颜色
  props:{
    path: String,
    activeColor: {
      type: String,
      default: 'red'
    }
  },
  computed: {
    isActive(){
      //!=-1代表我们的当前页面的path在url的栈里面找到了找到就返回true被选中，如果没找到就说明没被选中返回false
      return this.$route.path.indexOf(this.path)!==-1
    },
    //设置如果处于活跃状态才给style不处于活跃状态不给style
    activeStyle(){
      return this.isActive ? {color: this.activeColor}: {}
    }
  },
  methods: {
    itemClick () {
      //使用url切换路由，达到切换页面的效果，但是内部的url每个图标都不一样，所以我们需要使用父传子数据，使用props
      this.$router.replace(this.path).catch(err=>err)
    }
}
}
</script>
<style>
.tab-bar-item {
  flex: 1;
  text-align: center;
  height: 49px;
  font-size: 14px;
}
.tab-bar-item img {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  vertical-align: middle;
  margin-bottom: 2px;
}
/*设置属性，让使用item的时候传入颜色并被我们使用，需要让使用者传入参数颜色,但是js中的东西无法拿到css中来，所以我们直接在标签中设置属性style*/
/*.active{*/
/*  color: red;*/
/*}*/
</style>
